<template>
  <div class="rank-list">
    <div class="rank-list__header">
      <div class="index">排名</div>
      <div class="user">用户</div>
      <div class="jifen">积分</div>
    </div>
    <div class="rank-list__content">
      <div v-for="(item, index) in data" :key="item.id" class="rank-list__item">
        <div className="index">
          <image v-if="index === 0" src="@/assets/icon/rank-no-1.png" />
          <image v-else-if="index === 1" src="@/assets/icon/rank-no-2.png" />
          <image v-else-if="index === 2" src="@/assets/icon/rank-no-3.png" />
          <span v-else>{{ index + 1 }}</span>
        </div>
        <div className="user" style="justify-content: flex-start">
          <div class="user-item">
            <image :src="item.user.wechat.avatar" />
            <div class="user-item__info">
              <span class="user-item__info-name">
                {{ item.user.wechat.nickname }}
              </span>
              <span class="user-item__info-phone">
                {{ item.user.wechat.phone || "--" }}
              </span>
            </div>
          </div>
        </div>
        <div className="jifen">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IRankItemRes } from "@/apis/types/jifen";

defineOptions({
  name: "rank-list",
});

withDefaults(
  defineProps<{
    data: IRankItemRes[];
  }>(),
  {
    data: () => [],
  }
);
</script>

<style lang="less">
.rank-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  font-weight: 400;
  font-size: 28px;
  color: #000000;
  line-height: 40px;
  &__header {
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 500;
  }
  &__content {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    font-weight: 400;
    font-size: 28px;
    color: #8b8b8b;
    line-height: 40px;
    &::-webkit-scrollbar {
      display: none;
    }

    .rank-list__item {
      display: flex;
      align-items: center;
      padding: 20px 0;
      &:not(:last-child) {
        border-bottom: 1px solid #e2e3e6;
      }
    }
  }
  .index {
    flex: 1;
    text-align: center;
    image {
      width: 58px;
      height: 48px;
    }
  }
  .user {
    display: flex;
    flex: 2;
    text-align: center;
    justify-content: center;
    .user-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      image {
        width: 88px;
        height: 88px;
        border-radius: 50%;
      }
      &__info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 6px;
        &-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 400;
          font-size: 28px;
          color: #000000;
          line-height: 40px;
        }
        &-phone {
          font-weight: 400;
          font-size: 28px;
          color: #8b8b8b;
          line-height: 40px;
        }
      }
    }
  }
  .jifen {
    flex: 1;
    text-align: center;
  }
}
</style>
